<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
body {
  background: #fcfcfa;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}
</style>
</head>
<body>
	<canvas width="960" height="500"></canvas>
	<script
		src="${pageContext.request.contextPath}/static/fw/plugin/d3/d3.min.js"
		charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 960,
	    height = 500;
	console.log(d3)
	var projection = d3.geoAzimuthalEqualArea()
	    .scale(150)
	    .translate([width / 2, height / 2])
	    .precision(.1);

	var path = d3.geoPath()
	    .projection(projection);

	var graticule = d3.geoGraticule();

	var svg = d3.select("body").append("svg")
	    .attr("width", width)
	    .attr("height", height);

	svg.append("defs").append("path")
	    .datum({type: "Sphere"})
	    .attr("id", "sphere")
	    .attr("d", path);

	svg.append("use")
	    .attr("class", "stroke")
	    .attr("xlink:href", "#sphere");

	svg.append("use")
	    .attr("class", "fill")
	    .attr("xlink:href", "#sphere");

	svg.append("path")
	    .datum(graticule)
	    .attr("class", "graticule")
	    .attr("d", path);

	d3.json("${pageContext.request.contextPath}/pages/geo/world-50m.json", function(error, world) {
	  if (error) throw error;

	  svg.insert("path", ".graticule")
	      .datum(topojson.feature(world, world.objects.land))
	      .attr("class", "land")
	      .attr("d", path);

	  svg.insert("path", ".graticule")
	      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
	      .attr("class", "boundary")
	      .attr("d", path);
	});

	d3.select(self.frameElement).style("height", height + "px");

	</script>
</body>
</html>